<script setup>
import { useRouter } from 'vue-router'
import { login } from "@/api/auth.js";
import {onMounted} from "vue";
const router = useRouter()
const toSignup = () => {
    router.push({ name: 'Signup' })
}

onMounted(() => {
    // 获取表单元素
    const form = document.querySelector('form')
    // 监听表单的提交事件
    form.addEventListener('submit', function (event) {
        // 阻止表单的默认提交行为
        event.preventDefault()
        // 获取表单中的各个字段
        const username = document.getElementById('username').value
        const password = document.getElementById('password').value
        login({
            username,
            password,
            "strategy": "local"
        })
            .then((res) => {
                console.log(res)
                // {
                //     "name": "BadRequest",
                //     "message": "insert into \"auth\" (\"password\", \"username\") values ($1, $2) returning \"id\" - null value in column \"id\" of relation \"auth\" violates not-null constraint",
                //     "code": 400,
                //     "className": "bad-request"
                // }
                // {
                //     "id": "531c4da1-fec8-44f4-87a2-aefb1d8cab2f",
                //     "email": null,
                //     "username": "123"
                // }
            })
            .catch((err) => {
                console.log(err)
            })
    })
})
</script>

<template>
    <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-lg">
            <h1 class="text-center text-2xl font-bold text-indigo-600 sm:text-3xl">
                现在开始！
            </h1>

            <p class="mx-auto mt-4 max-w-md text-center text-gray-500">
                开始您的地理信息数据处理与共享之旅。我们的平台致力于为您提供最优质的服务，让您的工作更加高效和便捷。
            </p>

            <form action="#" class="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8">
                <p class="text-center text-lg font-medium">登录到您的帐户</p>

                <div>
                    <label for="username" class="sr-only">手机号码</label>

                    <div class="relative">
                        <input
                            type="tel"
                            id="username"
                            name="username"
                            class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
                            placeholder="请输入手机号码"
                        />

                        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
                      <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="size-4 text-gray-400"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                      >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                        />
                      </svg>
                    </span>
                    </div>
                </div>

                <div>
                    <label for="password" class="sr-only">Password</label>

                    <div class="relative">
                        <input
                            type="password"
                            id="password"
                            name="password"
                            class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
                            placeholder="请输入密码"
                        />

                        <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
                      <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="size-4 text-gray-400"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                      >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                        />
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                        />
                      </svg>
                    </span>
                    </div>
                </div>

                <button
                    type="submit"
                    class="block w-full rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white"
                >
                    登录
                </button>

                <p class="text-center text-sm text-gray-500">
                    没有账户？
                    <a class="underline" @click="toSignup">注册</a>
                </p>
            </form>
        </div>
    </div>
</template>

<style scoped></style>
